<template>
	<view>
		<u-tabs :list="tabsList" @click="tabsClick"></u-tabs>
		<view class="page" v-if="msgs.length > 0">
			<jp-virtual-list code="id" :pageSizes="pages" class="h100" :refresher="true" isBackTop @refresher="getMsgs"
				:data="msgs" ref="search">
				<template v-slot="{ list }">

					<view class="list-item u-border-bottom" @longpress="onOpsLong(item,index)" v-for="(item, index) in list"
						:key="index" @click="connect(item)">

						<view class="avatar">
							<text class="round" v-if="item.read == 0"></text>
							<image style="width: 60rpx; height: 60rpx;" src="/static/msg/nsg.png" mode="widthFix">
							</image>
						</view>

						<view class="content">
							<view class="title">
								<!-- <text class="name">预警信息</text> -->
								<up-text :text="item.title" type="error" bold size="15"></up-text>
								<text class="time">{{ item.createTime }}</text>
							</view>
							<image style="width: 100%;padding: 20rpx 0;" :src="item.img" mode="widthFix"></image>
							
							<!-- <view class="txt">{{ item.content }}</view> -->
						</view>
					</view>

				</template>

			</jp-virtual-list>

		</view>
		<view v-if="msgs.length < 1"
			style="width: 80%; height: 400rx; margin: 0 auto; text-align: center; padding-top: 40%">
			<fui-empty src="/static/msg/img_data_3x.png" title="暂无新消息"></fui-empty>
		</view>
		<view>
			<u-action-sheet @select="onOps" @close="isOps = !isOps" :actions="list" :show="isOps"></u-action-sheet>
		</view>
	</view>
</template>

<script>
	import {
		BASE_IP
	} from '@/common/http/url.js';
	export default {
		data() {
			return {
				tabsList: [{
						name: ' AI识别'
					},
					{
						name: ' 工作制度报警'
					},
					{
						name: ' 规则制度报警'
					}
				],
				msgs: [],
				isShow: false,
				list: [{
						id: 1,
						name: '删除',
						color: '#ff0000'
					},
					{
						id: 2,
						name: '全部删除'
					},
					{
						id: 3,
						name: '一键已读'
					}
				],
				isOps: false,
				item: '',
				tiems: "",
				index: 0,
				pages: 20
			};
		},
		onLoad() {
			// 	setTimeout(() => {
			// 		this.getMsgs();
			// 	}, 800);

			// 	let list = uni.getStorageSync('msgs');
			// 	if (list) {
			// 		this.isShow = true;
			// 		this.msgs = list;
			// 	}
			let list = [{
					"title": "接到MISLnet算法预警通知",
					"createTime": "2025年05月27日",
					"img":"https://mp-bfea0f33-0deb-44c8-86f2-196dd6ca37a5.cdn.bspapp.com/test/WechatIMG1196.jpg",
					"content": "基于深度学习的智能视频分析系统通过高性能卷积神经网络算法，精准识别出罗湖区域存在消防安全隐患等违规行为请主管部门立即启动应急预案，限期整改并反馈处理结果。"
				},
				{
					"title": "AI视频监测发现安全隐患",
					"img":"https://mp-bfea0f33-0deb-44c8-86f2-196dd6ca37a5.cdn.bspapp.com/test/WechatIMG1195.jpg",
					"createTime": "2025年05月27日",
					"content": "智能分析系统通过YOLOv5算法检测到福田区某商业场所存在电气线路违规敷设行为，火灾风险等级较高。请安全监管部门立即组织现场核查，于48小时内提交整改方案及验收报告。"
				},
				{
					"title": "MISLnet预警-紧急消防隐患通知",
					"createTime": "2025年05月27日",
					"img":"https://mp-bfea0f33-0deb-44c8-86f2-196dd6ca37a5.cdn.bspapp.com/test/WechatIMG1193.jpg",
					"content": "神经网络算法在龙岗区物流仓库识别出多例消防通道堵塞及易燃物违规堆放情况，系统判定风险指数已达红色警戒。请属地应急办即刻开展联合执法，要求3个工作日内完成隐患闭环处置。"
				},
				// {
				// 	"title": "智能视频分析平台紧急告警",
				// 	"createTime": "2025年05月27日",
				// 	"content": "基于Transformer架构的监测模型在南山区餐饮集中区域检测到燃气使用不规范行为（报警器缺失/管线老化），预测风险概率92%。请市监部门启动专项治理，限期5个工作日内完成整改并上传前后对比影像证据。"
				// }
			]
			this.msgs = list
		},
		methods: {
			tabsClick(e) {
				console.log(e.name)
			},
			addPage() {
				this.pages += 10
				let pages = this.pages
				if (pages >= this.msgs.length) {
					uni.showToast({
						title: "没有更多了",
						icon: "error"
					})
					return
				}

				this.getMsgs()
			},
			getMsgs() {
				let user = uni.getStorageSync('user');
				console.log(user);
				let url = BASE_IP + 'pc/msg/user';
				uni.request({
					header: {
						Authorization: user.token,
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					url: url,
					success: (res) => {
						console.log("报警消息", res.data)
						if (res.statusCode == 200) {
							this.msgs = res.data
							this.msgs.sort((a, b) => {
								let dateA = new Date(a.createTime);
								let dateB = new Date(b.createTime);
								return dateB - dateA;
							});
						}
					}
				});
				// console.log("下拉刷新成功")
				this.$refs.search.refreshers()
			},
			onOpsLong(item, index) {
				this.item = '';
				this.item = item;
				this.isOps = !this.isOps;
				this.index = index
			},
			onOps(res) {
				let user = uni.getStorageSync("user")

				if (res.id == 1) {
					let msg = this.item;
					console.log(msg)
					let url = BASE_IP + "pc/msg/del/" + msg.id
					uni.request({
						header: {
							Authorization: user.token,
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						url: url,
						method: "DELETE",
						success: (res) => {
							if (res.statusCode == 200) {
								if (res.data.code = 1) {
									console.log(res)
									this.getMsgs();
									uni.showToast({
										icon: "success",
										title: "删除成功"
									})
								} else {
									uni.showToast({
										icon: "error",
										title: "删除失败"
									})
								}
							} else {
								uni.showToast({
									icon: "error",
									title: "删除失败"
								})
							}
						}
					})
					return
				}

				if (res.id == 2) {
					let url = BASE_IP + "pc/msg/del/all"
					uni.request({
						header: {
							Authorization: user.token,
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						url: url,
						method: "DELETE",
						success: (res) => {
							if (res.statusCode == 200) {
								if (res.data.code = 1) {
									console.log(res)
									this.getMsgs();
									uni.showToast({
										icon: "success",
										title: "删除成功"
									})
								} else {
									uni.showToast({
										icon: "error",
										title: "删除失败"
									})
								}
							} else {
								uni.showToast({
									icon: "error",
									title: "删除失败"
								})
							}
						}
					})
					return
				}

				if (res.id == 3) {
					let url = BASE_IP + "pc/msg/red/all"
					uni.request({
						header: {
							Authorization: user.token,
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						url: url,
						method: "POST",
						success: (res) => {
							if (res.statusCode == 200) {
								if (res.data.code = 1) {
									console.log(res)
									this.getMsgs();
									uni.showToast({
										icon: "success",
										title: "已读成功"
									})
								} else {
									uni.showToast({
										icon: "error",
										title: "已读失败"
									})
								}
							} else {
								uni.showToast({
									icon: "error",
									title: "已读失败"
								})
							}
						}
					})
					return
				}


			},
			connect(item) {
				console.log(item)
				let url = BASE_IP + "pc/msg/up/1/1/" + item.id
				let user = uni.getStorageSync("user")
				uni.request({
					method: "POST",
					header: {
						Authorization: user.token,
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					url: url,
					success: (res) => {
						console.log(res)
						if (res.statusCode == 200) {
							if (res.data.code == 1) {
								this.getMsgs()
								uni.navigateTo({
									url: '/pagesMine/notificationCenter/messageCenter/messageCenter?id=' +
										item.id
								});
							}
						}
					}
				})
			},
			generateRandomNumber() {
				// 生成10位随机数
				var randomNumber = '';
				for (var i = 0; i < 10; i++) {
					randomNumber += Math.floor(Math.random() * 10);
				}
				return randomNumber;
			},
		},
		onUnload() {

		},


		onPullDownRefresh() {
			setTimeout(() => {
				this.getMsgs();
			}, 500);

			setTimeout(() => {
				this.getMsgs();
			}, 800);

			let list = uni.getStorageSync('msgs');
			// console.log(list);
			if (list) {
				this.isShow = true;
				this.msgs = list;
			}
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 32rpx;
		color: #333;
	}

	.list-item {
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1px solid #f7f8f9;

		.avatar {
			width: 60rpx;
			height: 60rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			position: relative;
			display: flex;
			justify-self: center;
			align-items: center;

			.round {
				position: absolute;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				background: #ef5656;
				top: -4rpx;
				right: -4rpx;
				z-index: 1;
			}

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.content {
			flex: 1;

			.title {
				display: flex;
				justify-content: space-between;

				.name {
					font-weight: bold;
				}

				.time {
					color: #999;
					font-size: 24rpx;
				}
			}

			.txt {
				margin-top: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
				text-align: left;
				color: #999;
				font-size: 26rpx;
			}
		}

	}
</style>